<template>
	<view>
		<u-navbar title="数据统计" placeholder leftIconColor="#fff" :titleStyle="titleStyle" :autoBack="true"
			bgColor="transparent" />
		<view class="content">
			<view class="box">
				<view class="box_title">
					<view class="title_left">
						<image src="/static/image/merchant_25.png"></image>
						<view class="text">店铺数据汇总</view>
					</view>
					<view class="month">
						<picker fields="month" mode="date" @change="bindDateChange">
							<u-icon name="arrow-down" color="#fff" labelPos="left" labelColor="#ffff" :label="labelName" /> 
						</picker>
					</view>
				</view>
				<view class="grid_2">
					<view class="reserve">
						<u--text :text="detail.orderNum+'单'" color="#fff" bold size="20px" margin="0px 0px 10px 0px"></u--text>
						<u--text text="平台餐桌预定量" color="#fff" bold size="14px"></u--text>
					</view>
					<view class="account">
						<u--text :text="detail.reserveNum+'单'" color="#fff" bold size="20px" margin="0px 0px 10px 0px"></u--text>
						<u--text text="平台费用结算量" color="#fff" bold size="14px"></u--text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					color: "#fff"
				},
				type:"",
				labelName:"",
				detail:{
					orderNum:0,
					reserveNum:0
				}
			};
		},
		onShow() {
			this.labelName = this.getTimes()
			this.getNum()
		},
		methods: {
			getTimes() {
				var date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-01' ; //
				return timer;
			},
			getNum() {
				this.$http.post('wanlshop/shop/dataStatistics', {
					type:this.labelName
				}).then(res => {
					uni.hideLoading()
					if(res.code == 1){
						this.detail = res.data
					}
				})
			},
			bindDateChange(event) {
				this.labelName = event.detail.value + '-01'
				uni.showLoading({
					title:"加载中...",
					mask:true
				})
				this.getNum()
			}
		}
	}
</script>
<style>
	page {
		background: linear-gradient(90deg, rgba(255, 203, 46, 1) 0%, rgba(255, 157, 46, 1) 100%);
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 40rpx 20rpx;

		.box {
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx 30rpx 200rpx 30rpx;
		}

		.box_title {
			display: grid;
			grid-template-columns: auto 120px;
			grid-column-gap: 20rpx;
			align-items: center;
			margin-bottom: 40rpx;
		}

		.grid_2 {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-column-gap: 20rpx;
			align-items: center;
		}

		.title_left {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.text {
				font-size: 36rpx;
				font-weight: 500;
				color: #000;
				line-height: 40rpx;
			}
		}

		.month {
			background: linear-gradient(90deg, rgba(255, 203, 46, 1) 0%, rgba(255, 157, 46, 1) 100%);
			padding: 10rpx;
			border-radius: 10rpx;
		}

		.reserve {
			background-image: url();
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 40rpx;
		}

		.account {
			background-image: url();
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 40rpx;
		}
	}
</style>
